<template>
	<view class="cell" @click="$emit('click_detals',item)">
		<image :src="decodeURIComponent(item.cover).substring(7)" mode=""></image>
		<view>
			<view>{{item.title}}</view>
			<view class="shortIntro">{{item.shortIntro}}</view>
			<view class="bottom">
				<view>{{item.author}}</view>
				<view>{{item.majorCate}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cell",
		props: {
			item: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.cell {
		padding-bottom: 40rpx;
		display: flex;

		image {
			width: 150rpx;
			height: 200rpx;
		}

		view {
			flex: 1;
			padding-left: 10rpx;

			.shortIntro {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-size: 26rpx;
				padding-top: 10rpx;
				color: $uni-text-color-placeholder;
			}

			.bottom {
				display: flex;
				font-size: 24rpx;
				margin-top: 20rpx;

				&>view:last-child {
					text-align: right;
				}

				&>view:first-child {
					text-align: left;
				}
			}
		}
	}
</style>
